@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";

.connection_cards {
  column-count: 2;
  column-gap: Spacings.$spacing05;
  padding-bottom: Spacings.$spacing05;
  margin-bottom: -(Spacings.$spacing05);

  > * {
    margin-bottom: Spacings.$spacing05;
  }

  &.spaced {
    justify-content: space-between;
  }

  @media screen and (max-width: ScreenSizes.$small) {
    column-count: 1;
  }

  @media screen and (min-width: ScreenSizes.$large) {
    column-count: 2;
  }

  &.spaced {
    column-count: 1;

    @media screen and (max-width: ScreenSizes.$small) {
      column-count: 1;
    }
  }
}
